<form [formGroup]="filterForm" class="search-area" fxLayoutGap="16px">
  <button (click)="refresh()" mat-stroked-button type="button">
    {{budat$|async|date:'yyyy-MM-dd'}} / {{(budatClass$|async)?.name}}
  </button>

  <mat-form-field floatLabel="never" fxFlex="100px">
    <mat-select [placeholder]="'batchNo'|translate" formControlName="batchId">
      <mat-option>{{'Common.all'|translate}}</mat-option>
      <mat-option *ngFor="let it of batches$|async" [value]="it.id">
        {{it.batchNo}}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field floatLabel="never" fxFlex="100px">
    <mat-select [placeholder]="'grade'|translate" formControlName="gradeId">
      <mat-option>{{'Common.all'|translate}}</mat-option>
      <mat-option *ngFor="let it of grades$|async" [value]="it.id">
        {{it.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field floatLabel="never" fxFlex="100px">
    <mat-select [placeholder]="'Common.print'|translate" formControlName="printed">
      <mat-option>{{'Common.all'|translate}}</mat-option>
      <mat-option [value]="false">{{'unPrint'|translate}}</mat-option>
      <mat-option [value]="true">{{'printed'|translate}}</mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field floatLabel="never" fxFlex="100px">
    <mat-select [placeholder]="'measure'|translate" formControlName="measured">
      <mat-option>{{'Common.all'|translate}}</mat-option>
      <mat-option [value]="false">{{'unMeasure'|translate}}</mat-option>
      <mat-option [value]="true">{{'measured'|translate}}</mat-option>
    </mat-select>
  </mat-form-field>

  <button (click)="resetFilter()" color="warn" mat-button type="button">
    {{'Common.reset'|translate}}
  </button>

  <span fxFlex></span>

  <button (click)="print()" [disabled]="selection.selected?.length<1" color="primary" mat-stroked-button type="button">
    {{'Common.print'|translate}} ({{selection.selected.length}})
  </button>
  <button (click)="batchMeasure()" [disabled]="!canBatchMeasure" color="primary" mat-stroked-button type="button">
    {{'batchMeasure'|translate}} ({{selection.selected.length}})
  </button>

  <button (click)="create()" color="primary" mat-stroked-button type="button">
    {{'PackageBoxType.MANUAL_APPEND'|translate}}
  </button>
</form>

<mat-divider></mat-divider>
<div fxFlex style="overflow: auto;width: 100vw;">
  <table [dataSource]="dataSource" class="package-box" mat-table>
    <ng-container matColumnDef="select" sticky>
      <th *matHeaderCellDef mat-header-cell>
        <mat-checkbox (change)="$event ? masterToggle() : null"
                      [checked]="selection.hasValue() && isAllSelected()"
                      [indeterminate]="selection.hasValue() && !isAllSelected()">
        </mat-checkbox>
      </th>
      <td *matCellDef="let row" mat-cell>
        <mat-checkbox (change)="$event ? selection.toggle(row) : null"
                      (click)="$event.stopPropagation()"
                      [checked]="selection.isSelected(row)">
        </mat-checkbox>
        <ng-container *ngIf="isValidPalletCode(row)">
          <span [matTooltip]="row.palletCode" class="pallet-code" matTooltipPosition="right"></span>
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="compositeField" sticky>
      <th (click)="masterToggle()" *matHeaderCellDef mat-header-cell>
        <div fxLayout fxLayoutAlign="center center" fxLayoutGap="32px">
          <span translate="printCount"></span>
          <mat-divider vertical></mat-divider>
          <span translate="PackageBox.code"></span>
          <mat-divider vertical></mat-divider>
          <span translate="batchNo"></span>
        </div>
      </th>
      <td (click)="selection.toggle(row)" *matCellDef="let row" [class.dd]="!row.budat" mat-cell matRipple>
        <div fxLayout>
          <span fxFlex="40px">{{row.printCount}}</span>
          <mat-divider vertical></mat-divider>
          <span fxFlex="240px">{{row.code}}</span>
          <mat-divider vertical></mat-divider>
          <span [matTooltip]="batchTooltip(row)" fxFlex="100px">
            {{row.batch.batchNo}}
          </span>
        </div>
      </td>
    </ng-container>

    <ng-container matColumnDef="grade">
      <th *matHeaderCellDef mat-header-cell>{{'grade'|translate}}</th>
      <td *matCellDef="let row" mat-cell>{{row.grade.name}}</td>
    </ng-container>

    <ng-container matColumnDef="silkCount">
      <th *matHeaderCellDef mat-header-cell>{{'silkCount'|translate}}</th>
      <td *matCellDef="let row" mat-cell>{{row.silkCount}}</td>
    </ng-container>

    <ng-container matColumnDef="netWeight">
      <th *matHeaderCellDef mat-header-cell>{{'netWeight'|translate}}</th>
      <td *matCellDef="let row" mat-cell>{{row.netWeight|number:'.3-3'}}</td>
    </ng-container>

    <ng-container matColumnDef="grossWeight">
      <th *matHeaderCellDef mat-header-cell>{{'grossWeight'|translate}}</th>
      <td *matCellDef="let row" mat-cell>{{row.grossWeight|number:'.3-3'}}</td>
    </ng-container>

    <ng-container matColumnDef="sapT001l">
      <th *matHeaderCellDef mat-header-cell>{{'PackageBox.sapT001l'|translate}}</th>
      <td *matCellDef="let row" mat-cell>
        <span *ngIf="row.sapT001l" [matTooltip]="row.sapT001l?.lgobe">
          {{row.sapT001l.lgort}} / {{('SaleType.' + row.saleType)|translate}}
        </span>
      </td>
    </ng-container>

    <ng-container matColumnDef="budat">
      <th *matHeaderCellDef mat-header-cell>{{'PackageBox.budat'|translate}}</th>
      <td *matCellDef="let row" mat-cell>{{row.budat|date:'yyyy-MM-dd'}} / {{row.budatClass?.name}}</td>
    </ng-container>

    <ng-container matColumnDef="palletType">
      <th *matHeaderCellDef mat-header-cell>{{'palletType'|translate}}</th>
      <td *matCellDef="let row" mat-cell>
        <span [matTooltipDisabled]="!isValidPalletCode(row)" [matTooltip]="row.palletCode">
          {{row.palletType}}
        </span>
      </td>
    </ng-container>

    <ng-container matColumnDef="packageType">
      <th *matHeaderCellDef mat-header-cell>{{'PackageBox.packageType'|translate}}</th>
      <td *matCellDef="let row" mat-cell>{{row.packageType}}</td>
    </ng-container>

    <ng-container matColumnDef="foamType">
      <th *matHeaderCellDef mat-header-cell>{{'foamType'|translate}}</th>
      <td *matCellDef="let row" mat-cell>{{row.foamType}}</td>
    </ng-container>

    <ng-container matColumnDef="foamNum">
      <th *matHeaderCellDef mat-header-cell>{{'foamNum'|translate}}</th>
      <td *matCellDef="let row" mat-cell>{{row.foamNum}}</td>
    </ng-container>

    <ng-container matColumnDef="creator">
      <th *matHeaderCellDef mat-header-cell>{{'Common.creator'|translate}}</th>
      <td *matCellDef="let row" mat-cell>
        {{row.creator.name}}
        <ng-container *ngIf="row.creator.hrId">
          [{{row.creator.hrId}}]
        </ng-container>
      </td>
    </ng-container>

    <ng-container matColumnDef="createDateTime">
      <th *matHeaderCellDef mat-header-cell>{{'Common.time'|translate}}</th>
      <td *matCellDef="let row" mat-cell>{{row.createDateTime|date:'yyyy-MM-dd HH:mm:ss'}}</td>
    </ng-container>

    <ng-container matColumnDef="palletCode">
      <th *matHeaderCellDef mat-header-cell>{{'palletCode'|translate}}</th>
      <td *matCellDef="let row" mat-cell>{{row.palletCode}}</td>
    </ng-container>

    <ng-container matColumnDef="btns" stickyEnd>
      <th *matHeaderCellDef mat-header-cell>{{'Common.operation'|translate}}</th>
      <td *matCellDef="let row" [matMenuTriggerFor]="btnsMenu" mat-cell matRipple>
        <mat-icon>list</mat-icon>
        <mat-menu #btnsMenu="matMenu">
          <button (click)="measure(row)" color="primary" mat-menu-item type="button">
            {{'measure'|translate}}
          </button>
          <button (click)="print(row)" [disabled]="!row.budat" color="primary" mat-menu-item type="button">
            {{'Common.print'|translate}}
          </button>
          <button (click)="detail(row)" [disabled]="!row.budat" color="primary" mat-menu-item type="button">
            {{'Common.detail'|translate}}
          </button>
        </mat-menu>
      </td>
    </ng-container>

    <tr *matHeaderRowDef="displayedColumns; sticky: true" mat-header-row></tr>
    <tr (click)="copy(row.code,$event)" *matRowDef="let row; columns: displayedColumns;" [class.printed]="row.printCount>0" mat-row></tr>
  </table>
</div>
